<template>
  <view v-if="!isLoading">
    <transition name="tarbar">
      <view class="my-bar" v-if="rightTar">
        <view class="my-bar-imgitem">
          <view class="my-bar-item-img">
            <image :src="profile.profile.avatarUrl || ''" mode="" />
          </view>
          {{ profile.profile.nickname || "" }}
          <text>&gt;</text>
        </view>

        <view
          class="my-bar-list"
          v-for="(list, index) in iconList"
          :key="index"
        >
          <view
            class="my-bar-item"
            v-for="(item, index1) in list"
            :key="index1"
          >
            <text class="iconfont" :class="item.icon"></text>
            <text>{{ item.name }}111</text>
            <text>&gt;</text>
          </view>
        </view>
        <view class="my-bar-btn">
          <button @tap="logoutLogin">退出登录</button>
        </view>
      </view>
    </transition>
    <view
      class="box"
      :class="[rightTar ? 'active' : '']"
      @tap.stop="closeRightTar"
    >
      <musicHead title="我的" :icon="false"> </musicHead>
      <view class="my-setting">
        <text class="iconfont icon-shezhi" @tap.stop.self="showRightTar"></text>
      </view>

      <view class="container">
        <scroll-view scroll-y="true">
          <view class="my-info">
            <view class="my-info-img" @tap="changeAva">
              <image :src="profile.profile.avatarUrl || ''" mode="" />
            </view>
            <view class="my-info-nickname"
              >{{ profile.profile.nickname || "" }}
              <text
                class="iconfont icon-vip"
                :class="[profile.profile.vipType == 0 ? '' : 'active']"
              ></text>
            </view>
            <view class="my-info-other">
              <view>{{ profile.profile.newFollows || 0 }}关注</view> |
              <view>{{ profile.profile.followeds || 0 }}粉丝</view> |
              <view>Lv.{{ profile.level }}</view>
            </view>
          </view>
          <view class="my-banner">
            <view
              v-for="(item, index) in bannerList"
              :data-index="index"
              @tap="entryBanner"
              :key="index"
            >
              <text class="iconfont" :class="item.icon"></text>
              <text>{{ item.name }}</text>
            </view>
          </view>
          <block v-if="playlist.length!=0">
          <view class="my-song"
            >我的歌单
            <text>({{ playlist.length }}) 条</text>
          </view>
          <view class="my-song-list">
            <view
              class="my-song-item"
              v-for="(item, index) in playlist"
              :key="index"
              @tap="goToDetail(item.id)"
            >
              <view class="my-song-item-img">
                <image :src="item.coverImgUrl" mode="" />
              </view>
              <view class="my-song-item-middle">
                <text>{{ item.name }}</text>
                <text>{{ item.trackCount }}首</text>
              </view>
              <text class="my-song-item-right iconfont icon-esc-copy"></text>
            </view>
          </view>
          </block>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import { getRectPlayMusic, singSong } from "@/api";
import { mapState } from "vuex";
import { baseURL } from "@/utils/request.js";

export default {
  data() {
    return {
      // 侧边的弹框是否展示
      rightTar: false,

      bannerList: [
        { icon: "icon-24gf-playCircle", name: "最近播放" },
        { icon: "icon-xiazai", name: "本地下载" },
        { icon: "icon-yunpan", name: "云盘" },
        { icon: "icon-gouwuche", name: "已购" },
        { icon: "icon-haoyou", name: "我的好友" },
        { icon: "icon-shoucang", name: "收藏和赞" },
        { icon: "icon-xinhao", name: "我的播客" },
        { icon: "icon-duanxin", name: "交友" },
      ],
      iconList: [
        [
          { icon: "icon-duanxin1", name: "测试" },
          { icon: "icon-duanxin1", name: "测试" },
          { icon: "icon-duanxin1", name: "测试" },
        ],
        [
          { icon: "icon-duanxin1", name: "测试" },
          { icon: "icon-duanxin1", name: "测试" },
          { icon: "icon-duanxin1", name: "测试" },
        ],
        [
          { icon: "icon-duanxin1", name: "测试" },
          { icon: "icon-duanxin1", name: "测试" },
          { icon: "icon-duanxin1", name: "测试" },
        ],
        [
          { icon: "icon-duanxin1", name: "测试" },
          { icon: "icon-duanxin1", name: "测试" },
          { icon: "icon-duanxin1", name: "测试" },
        ],
        [
          { icon: "icon-duanxin1", name: "测试" },
          { icon: "icon-duanxin1", name: "测试" },
          { icon: "icon-duanxin1", name: "测试" },
        ],
      ],
      playlist: {},
      isLoading: true,
    };
  },

  onLoad(params) {
    uni.showLoading({
      title: "Loading...",
    });
    this.$store.dispatch("User/userProfile", uni.getStorageSync("userId"));
    this.getSingSong(uni.getStorageSync("userId"));
  },
  onShow() {
    if (this.playlist.length == 0) {
      this.getSingSong(uni.getStorageSync("userId"));
    }
  },

  onPullDownRefresh() {
    try {
      this.$store.dispatch("User/userProfile", uni.getStorageSync("userId"));
      this.getSingSong(uni.getStorageSync("userId"));
      uni.stopPullDownRefresh();
      uni.showToast({
        title: "刷新成功",
        duration: 2000,
      });
    } catch (error) {}
  },

  methods: {
    showRightTar() {
      this.rightTar = true;
    },
    closeRightTar() {
      this.rightTar = false;
    },

    // 退出登录
    logoutLogin() {
      const _this = this;
      uni.showModal({
        title: "提示",
        content: "是否退出登录",
        success: function (res) {
          if (res.confirm) {
            try {
              _this.rightTar = false;
              _this.playlist = [];
              _this.$store.dispatch("User/userLogout");
            } catch (error) {}
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },

    changeAva() {
      uni.chooseImage({
        // 选择图片
        count: 1,
        success: (res) => {
          uni.uploadFile({
            url: `http://localhost:3000/avatar/upload?imgSize=200`,
            filePath: res.tempFilePaths[0], // 临时文件路径,
            name: "file",
            header: {
              "Content-Type": "multipart/form-data",
            },
            formData: {
              name: "imgFile",
            },
            success: (res1) => {
              // 成功后的回调
              console.log(res1);
            },
          });
        },
      });
    },

    entryBanner(e) {
      let index = e.currentTarget.dataset.index;
      console.log(e);
      console.log(index);
      if (index == 0) {
        uni.navigateTo({
          url: "/pages/my/history/index",
        });
      }
    },

    // 获取歌单
    async getSingSong(uid) {
      try {
        let data = await singSong(uid);
        this.playlist = data.playlist || {};
        console.log("歌单", data);
      } catch (error) {
      } finally {
        uni.hideLoading();
        this.isLoading = false;
      }
    },

    //
    goToDetail(id) {
      uni.navigateTo({
        url: `/pages/songSheet/index?id=${id}`,
      });
    },
  },
  computed: {
    ...mapState("User", ["profile"]),
  },
};
</script>

<style lang="less" scoped>
.active {
  background: #d5d5d5;
  opacity: 0.5;
}

page {
  background-color: #f2f4f3;
  height: 100%;
  width: 100%;
}

.container {
  width: 100%;
  height: calc(100vh - 156px);
  overflow: hidden;
}

.my-bar {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99999;
  width: 80%;
  height: 100%;
  overflow: scroll;
  color: #000000;
  font-size: 36rpx;
  border-top-right-radius: 30rpx;
  border-bottom-right-radius: 30rpx;
  background-color: #f6f6f6;
  &::-webkit-scrollbar {
    display: none;
  }
  .my-bar-imgitem {
    display: flex;
    align-items: center;
    justify-content: left;
    // border-bottom: 1rpx solid #999999;
    padding: 20rpx;
    margin-top: 10rpx;
    font-weight: 800;
    & > text {
      margin-left: auto;
    }
  }
  .my-bar-item-img {
    width: 80rpx;
    height: 80rpx;
    overflow: hidden;
    margin-right: 20rpx;
    image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  .my-bar-list {
    background-color: #fff;
    margin: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    border-radius: 20rpx;

    .my-bar-item {
      display: flex;
      justify-content: left;
      align-items: center;
      margin: 10rpx 0rpx;
      text {
        margin: 10rpx;
      }
      & > text:nth-child(1) {
        font-size: 58rpx;
        // color: white;
      }
      & > text:nth-child(2) {
        font-size: 42rpx;
      }

      & > text:nth-child(3) {
        margin-left: auto;
        margin-right: 20rpx;
        color: #999999;
      }
    }
  }

  .my-bar-btn {
    background-color: yellow;
    border-radius: 20rpx;
    margin: 40rpx;
    button {
      background-color: #fff;
    }
  }
}

.box {
  position: relative;
  .my-setting {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
    text {
      margin-left: 30rpx;
      font-size: 54rpx;
      color: #000000;
    }
  }
  .my-info {
    margin: 30rpx;
    margin-top: 100rpx;
    background-color: #fff;
    border-radius: 30rpx;
    height: 250rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    .my-info-img {
      width: 170rpx;
      height: 170rpx;
      position: absolute;
      border-radius: 50%;
      overflow: hidden;
      top: 0rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }

    .my-info-nickname {
      margin-top: 100rpx;
      font-size: 42rpx;
      font-weight: 800;
      text {
        margin-left: 20rpx;
        color: #999999;
      }
      .active {
        color: red;
      }
    }
    .my-info-other {
      display: flex;
      margin-bottom: 30rpx;
      color: #999999;
      view {
        margin: 0rpx 20rpx;
      }
    }
  }

  .my-banner {
    margin: 30rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 30rpx;
    view {
      width: 160rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;
      text-align: center;
      margin: 30rpx 0rpx;
      & > text:nth-child(1) {
        color: #fc504f;
        font-size: 68rpx;
      }
      & > text:nth-child(2) {
        margin-top: 10rpx;
        color: #666666;
      }
    }
  }

  .my-song {
    margin: 30rpx;
    margin-top: 40rpx;
    font-size: 42rpx;
    font-weight: 800;
    & > text {
      font-size: 32rpx;
      margin-left: 20rpx;
      color: #666666;
    }
  }
  .my-song-list {
    display: flex;
    background-color: #ffffff;
    margin: 30rpx;
    border-radius: 30rpx;
    flex-direction: column;

    .my-song-item {
      margin: 20rpx 0rpx;
      display: flex;
      flex-direction: row;
      justify-content: left;
      align-items: center;

      .my-song-item-img {
        margin-left: 20rpx;
        width: 120rpx;
        height: 120rpx;
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
          border-radius: 10rpx;
        }
      }

      .my-song-item-middle {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        // align-items: center;
        margin-left: 20rpx;

        & > text:nth-child(1) {
          font-size: 36rpx;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          /** 对象作为伸缩盒子模型显示 **/
          -webkit-box-orient: vertical;
          /** 设置或检索伸缩盒对象的子元素的排列方式 **/
          -webkit-line-clamp: 1;
          /** 显示的行数 **/
          overflow: hidden;
          /** 隐藏超出的内容 **/
          word-wrap: break-word;
        }
        & > text:nth-child(2) {
          color: #666666;
        }
      }

      .my-song-item-right {
        margin-left: auto;
        color: #666666;
        font-size: 48rpx;
        margin-right: 32rpx;
      }
    }
  }
}

.tarbar-enter,
.tarbar-leave-to {
  transform: translateX(-100%);
}
/* 整个元素的进入和离开的过程，谁做动画给谁加 */
.tarbar-enter-active,
.tarbar-leave-active {
  transition: 0.1s linear;
}
/* 进入的终点、离开的起点 */
.tarbar-enter-to,
.tarbar-leave {
  transform: translateX(0);
}
</style>